<!DOCTYPE html>
<html>
<head>
<title>Energy Level Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px Arial';
    ctx.textBaseline = 'middle';

    // --- Coordinates ---
    const lineX1 = 220;
    const lineX2 = 380;
    const y_n1 = 420;
    const y_n2 = 280;
    const y_n3 = 180;
    const y_n4 = 140;
    const labelX = lineX2 + 15;
    const arrowX = 100;
    const arrowY_start = 420;
    const arrowY_end = 140;
    const arrowTextX = 20;

    // --- Draw Energy Levels ---
    // n = 1
    ctx.beginPath();
    ctx.moveTo(lineX1, y_n1);
    ctx.lineTo(lineX2, y_n1);
    ctx.stroke();
    ctx.fillText('n = 1', labelX, y_n1);

    // n = 2
    ctx.beginPath();
    ctx.moveTo(lineX1, y_n2);
    ctx.lineTo(lineX2, y_n2);
    ctx.stroke();
    ctx.fillText('n = 2', labelX, y_n2);

    // n = 3
    ctx.beginPath();
    ctx.moveTo(lineX1, y_n3);
    ctx.lineTo(lineX2, y_n3);
    ctx.stroke();
    ctx.fillText('n = 3', labelX, y_n3);

    // n = 4
    ctx.beginPath();
    ctx.moveTo(lineX1, y_n4);
    ctx.lineTo(lineX2, y_n4);
    ctx.stroke();
    ctx.fillText('n = 4', labelX, y_n4);

    // --- Draw Energy Arrow and Text ---
    // Arrow line
    ctx.beginPath();
    ctx.moveTo(arrowX, arrowY_start);
    ctx.lineTo(arrowX, arrowY_end);
    ctx.stroke();

    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(arrowX, arrowY_end);
    ctx.lineTo(arrowX - 8, arrowY_end + 14);
    ctx.moveTo(arrowX, arrowY_end);
    ctx.lineTo(arrowX + 8, arrowY_end + 14);
    ctx.stroke();

    // Arrow text
    ctx.textAlign = 'left';
    const textCenterY = (arrowY_start + arrowY_end) / 2;
    ctx.fillText('increasing', arrowTextX, textCenterY - 12);
    ctx.fillText('energy', arrowTextX, textCenterY + 12);

    // --- Draw Figure Caption ---
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 8.1', (lineX1 + lineX2) / 2, 470);

</script>
</body>
</html>